<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>-------------------state内容---------------------</h2>
    <h2>展示counter：{{$store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
    <h2>info里的信息：{{$store.state.info}}</h2>
    <button @click="updateInfo">修改info信息</button>

    <h2>---------------getters的内容-------------------</h2>
    <h2>getters:{{$store.getters.powerCounter}}</h2>
    <h2>20岁以上学生：{{$store.getters.more20stu}}</h2>
    <h2>20岁以上有{{$store.getters.more20stuLength}}个人</h2>
    <h2>{{$store.getters.moreAgestu(19)}}</h2>

    <h2>---------------modules的内容---------------------</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改名字</button>
    <h2>{{$store.getters.fullName}}</h2>
    <h2>{{$store.getters.fullName2}}</h2>
    <h2>{{$store.getters.fullName3}}</h2>
    <button @click="asyncUpdateName">修改名字</button>

    <h2>---------------------helloVuex界面--------------------</h2>
    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";
import {
  INCREMENT,
  DECREMENT
} from "./store/mutation-types";

export default {
  name: 'App',
  data(){
    return {
      message:'开开心心浪浪钉',
    }
  },
  components:{
    HelloVuex
  },
  // computed:{
  //   more20stu(){
  //     return this.$store.state.students.filter(student =>  student.age >= 20)
  //   }
  // },
  methods:{
    addCounter(){
    //  调用$store的commit方法，把mutation里的方法传进去
      this.$store.commit(INCREMENT)
    },
    subCounter(){
      this.$store.commit(DECREMENT)
    },
    // 调用调用$store的commit方法，如果还要传参数，就要用下面方法
    addCount(count){
      //参数被称为mutation的payload:负载
      // 1.普通的提交风格
      //this.$store.commit('incrementCount',count)

       //2.特殊的提交风格
      //  如果要传多个参数，可以使用对象{}来传
      this.$store.commit({
        type:'incrementCount',
        count
      })
    },
    addStudent(){
      let stu={id:114,name:'栀子花',age:25}
      this.$store.commit('addStudent',stu)
    },
    updateInfo(){
      // 同步方法修改state数据
      // this.$store.commit('updateInfo')
    //   异步方法修改state数据
    //  如果要传多个参数，可以使用对象{}来传
      /*this.$store.dispatch('aUpdateInfo',{
        message: 12345,
        success: () => {
          console.log('里面已经完成了');
        }
      })*/

    //方法二
      this.$store.dispatch('aUpdateInfo',12345).then(date => {
        console.log(date);  // 1111
        console.log('里面已经完成');  // 里面已经完成
      })
    },
    updateName(){
      // mutation里的方法不分模块，可以直接commit
      this.$store.commit('updateName','俊哲批')
    },
    asyncUpdateName(){
      this.$store.dispatch('aUpdateName')
    }
  }
}
</script>

<style>

</style>
